<template>
  <div>
    <!--
        自定义指令：
            全局自定义指令
                注册
                   Vue.directive('指令名',{
                    指令的生命周期：
                        bind:绑定时（类似于beforeMount）,
                        inserted:渲染时（类似于mounted）,
                        update:更新时（可能更新完成，也可能没完成，它是指令所在组件有更新），
                        componentUpdated:更新后（类似于updated,指令所在组件有更新，且更新完成了）
                        unbind:解绑（类似于destroyed）

                        inserted(dom,obj,vnode){
                          dom:指令所在dom
                          obj:{
                            属性，
                            修饰符
                            值（value）
                          }
                          vnode:{
                            context:指令所在组件的this(实例)
                          }
                        }
                   })

                使用：
                   v-指令名:属性.修饰符='值'
                   v-on:keyup.enter='submit'
            局部自定义指令
               directives:{
                指令名:{
                  指令生命周期
                }
               }

 -->
    <!-- v-hmtext='值' -->

    <div v-hmtext="msg" />
    <button @click="msg = Date.now()">修改msg</button>
    <!-- 识别图片加载错误
    dom.onerror=()=>{
       // 图片加载错误
    }

    ref:作用
    原生标签：获取dom
    组件标签：获取组件实例
    -->
    <img
      ref="img"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png"
      alt=""
    >
    <div v-xxx />
  </div>
</template>
<script>
export default {
  directives: {
    hmtext: {
      inserted(dom, obj, vnode) {
        dom.innerText = obj.value
      },
      componentUpdated(dom, obj, vnode) {
        dom.innerText = obj.value
      },
      unbind() {
        console.log('unbind')
      }
    }
  },
  data() {
    return {
      msg: '99期，你好'
    }
  },
  mounted() {
    alert(this.$route2)
    this.$refs.img.onerror = () => {
      this.$refs.img.src =
        'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
      console.log('图片加载 错误')
    }
  },
  methods: {
    async btnClick() {}
  }
}
</script>
<style></style>
